<template>
  <div id="membercenter">
    <div class="mb-msg">
      <div class="mb-msg-t">
        <div class="bg">
          <img src="../../assets/images/mem-bg.png">
        </div>
        <div class="user-Msg">
          <p class="userName">{{ data.name }}</p>
          <p class="">DansLounge会员卡</p>
        </div>
        <div class="ewm" @click="routeto('barcode')">
          <img src="../../assets/images/mem-txm.png">
        </div>
        <p class="phone">{{ data.mobile }}</p>
        <p v-if="data.vipLevel !== '0'" class="userLevel">{{ data.vipLevel }}</p>
      </div>
      <div class="mb-msg-b">
        <a class="txt txt-bor" href="javascript:;" @click="routeto('coupon')">
          <div class="left">
            <p>优惠券</p>
            <p>{{ data.avaCoupon }}</p>
          </div>
        </a>
        <a class="txt" href="javascript:;" @click="routeto('points')">
          <div class="right">
            <p>积分</p>
            <p>{{ data.avaPoints }}</p>
          </div>
        </a>
      </div>
    </div>
    <h4></h4>
    <div class="mb-list">
      <ul>
        <li :class="{label2: show}">
          <div class="icon1"><img src="../../assets/images/memCenter-userinfo.png"></div>
          <a class="txt" href="javascript:;" @click="routeto('perdetails')">个人信息</a>
        </li>
        <li>
          <div class="icon2"><img src="../../assets/images/memCenter-equities.png"></div>
          <a class="txt" href="javascript:;" @click="routeto(routerTo1)">会员福利</a>
        </li>
        <li>
          <div class="icon3"><img src="../../assets/images/menCenter-shop.png"></div>
          <a class="txt" href="javascript:;" @click="routeto('mall')">积分兑礼</a>
        </li>
        <li>
          <div class="icon4"><img src="../../assets/images/memCenter-record.png"></div>
          <a class="txt" href="javascript:;" @click="routeto('expense')">消费记录</a>
        </li>
        <li>
          <div class="icon5"><img src="../../assets/images/memCenter-inquire.png"></div>
          <a class="txt" href="javascript:;" @click="routeto('storelist')">店铺查询</a>
        </li>
        <li data-class="label3">
          <div class="icon6"><img src="../../assets/images/memCenter-activity.png"></div>
          <a class="txt" href="javascript:;" @click="routeto('memberactivity')">会员活动</a>
        </li>
        <li class="label1">
          <div class="icon7"><img src="../../assets/images/memCenter-sign.png"></div>
          <a class="txt card" href="javascript:;" @click="routeto('notfound')">打卡签到</a>
        </li>
        <li>
          <div class="icon8"><img src="../../assets/images/memCenter-conversion.png"></div>
          <a class="txt" href="javascript:;" @click="routeto('orderlist')">兑换记录</a>
        </li>
        <li>
          <div class="icon8"><img src="../../assets/images/memCenter-server.png"></div>
          <a class="txt"  href="tel:400-070-6099">服务中心</a>
        </li>
      </ul>
    </div>
    <div class="promptText" v-if="isShow">
      <div class="left">
        <i class="fa fa-volume-down" aria-hidden="true"></i>
        <p><marquee loop="infinite" scrollamount="4">您有一份新人礼未领取!</marquee></p>
      </div>
      <div class="right">
        <a class="txt" href="javascript:;" @click="routeto(routerTo)">去领取></a>
      </div>
    </div>
    <div class="mem-mask">
      <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '70%', 'background-color': 'transparent'}">
        <div class="pic">
          <img src="../../assets/images/mem-modal.png" alt="">
          <p class="mem-title" style="text-align:center;" >
            <span class="btn" @click="routeto('usersetting')">前往</span>
          </p>
        </div>
        <!-- <p class="mem-close" @click="closeClick">
          <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
        </p> -->
        <span class="mem-close" @click="closeClick">x</span>
      </x-dialog>
    </div>
    <confirm v-model="isshowgetcard"
      title="提示"
      content="您现在还不是微信会员，请先领取微信会员卡"
      :close-on-confirm="false"
      @on-cancel="cancelGetCard"
      @on-confirm="showVipCard">
    </confirm>
  </div>
</template>
<script>
  import { XDialog, Confirm } from 'vux'
  export default {
    name: 'membercenter',
    components: {
      XDialog,
      Confirm
    },
    data () {
      return {
        show: false,
        isShow: false,
        showDialogStyle: false,
        routerTo: '',
        routerTo1: '',
        data: {
          avaCoupon: '0',
          avaPoints: '0'
        },
        status: '',
        mask: {
          'isShow1': false,
          'isShow2': false,
          'isShow3': false
        },
        isshowgetcard: false
      }
    },
    created () {
      this.$axios.post(this.apidomain + '/api/member/getIsActivateMemberCard/' + this.getCookie('appid'), {
        openId: this.getCookie('openid')
      })
      .then((response) => {
        if (response.data.data === '1') {
          this.getUserInfo()
        } else {
          // this.routeto('wechatticket')
          this.isshowgetcard = true
        }
      })
    },
    methods: {
      // 获取用户信息
      closeClick: function () {
        this.showDialogStyle = false
        if (this.status === 0) {
          this.isShow = true
        }
      },
      getUserInfo: function () {
        this.$axios.post(this.apidomain + '/api/cust/getCustInfo/' + this.getCookie('appid'), {
          wxOpenId: this.getCookie('openid')
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.data = response.data.data
            // 用户有新人礼
            this.status = response.data.data.isGetGift
            if (response.data.data.vip === '0') {
              this.routerTo1 = 'leveldetai'
              if (this.$store.state.vux.isShowHomeTip) {
                this.showDialogStyle = true
                this.$store.state.vux.isShowHomeTip = false
              }
            } else {
              this.routerTo1 = 'memberlevel'
            }
            if (response.data.data.isGetGift === 0) {
              if (this.showDialogStyle === true) {
                this.isShow = false
              } else {
                this.isShow = true
              }
              this.show = true
              this.routerTo = 'usersetting'
            } else if (response.data.data.isGetGift === 1) {
              // 用户没有新人礼
              // 判断实物是否领取
              this.$axios.post(this.apidomain + '/api/giftCert/selectCustNotGetGoods/' + this.getCookie('appid'), {
                openId: this.getCookie('openid')
              })
              .then((response) => {
                if (response.data.errorCode === '0') {
                  if (response.data.data !== null) {
                    this.isShow = true
                    this.show = true
                    this.routerTo = 'newgift'
                  } else {
                    this.isShow = false
                  }
                }
              })
              .catch((error) => {
                console.log(error)
              })
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
      },
      showVipCard: function () {
        // 未领取会员卡
        this.$axios.post(this.apidomain + '/api/card/getWxCardId/' + this.getCookie('appid'), {
          cardType: 'MEMBER_CARD'
        })
        .then((response) => {
          const timestamp = Date.parse(new Date()) / 1000
          const nonceStr = Math.random().toString(36).substr(2)
          this.getObjDetail(this.apidomain + '/api/wechat/mp/getCardApiTicket/' + this.getCookie('appid'))
          .then((data) => {
            const noncearr = [timestamp, response.data.data.cardId, data.data, nonceStr]
            noncearr.sort()
            const signature = this.$jssha(noncearr.join(''))
            this.$wechat.ready(() => {
              this.$wechat.addCard({
                cardList: [{
                  cardId: response.data.data.cardId,
                  cardExt: '{"timestamp": "' + timestamp + '", "nonce_str": "' + nonceStr + '", "signature": "' + signature + '"}'
                }],
                success: (res) => {
                  this.isshowgetcard = false
                  setTimeout(() => {
                    window.location.reload()
                  }, 1500)
                },
                cancel: (error) => {
                  console.log(error)
                  window.alert('亲爱的用户，您还没有激活会员卡哦！')
                  window.WeixinJSBridge.invoke('closeWindow')
                }
              })
              if (navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1) {
                // 监听是否点击关闭原生卡
                document.addEventListener('visibilitychange', () => {
                  if (document.visibilityState !== 'hidden') {
                    window.WeixinJSBridge.invoke('closeWindow')
                  }
                })
              }
            })
          }, () => {})
        })
      },
      cancelGetCard: function () {
        window.WeixinJSBridge.invoke('closeWindow')
      }
    }
  }
</script>
<style lang="less" >
  @import "../../assets/less/membercenter/membercenter.less";
</style>
